<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1600px;height:600px;"></div>
<script type="text/javascript">


    const dataSet = [
        [
            "店播经营体",
            0.5591407239991113,
            39962.479999999996
        ],
        [
            "达人十一经营体",
            0.578102055556496,
            252219.29000000004
        ],
        [
            "达人八经营体",
            0.24631125196216389,
            334159.14
        ],
        [
            "达人七经营体",
            0.28911212042671997,
            96846.13000199999
        ],
        [
            "战略机构一经营体",
            0.1500664679280713,
            244935.029907
        ],
        [
            "达人五经营体",
            0.6477307404222264,
            14418.8
        ],
        [
            "达人四经营体",
            0.30466539318925046,
            116660.499924
        ],
        [
            "达人三经营体",
            0.7225988854560373,
            142241.05992099998
        ],
        [
            "达人九经营体",
            0.31255442691984336,
            213635.080002
        ],
        [
            "达人十经营体",
            0.476426390264646,
            122447.73
        ],
        [
            "直播五经营体",
            0.49543603689454935,
            24030.649999999998
        ],
        [
            "短视频电商链群",
            null,
            null
        ],
        [
            "小鹿蓝蓝链群",
            null,
            null
        ],
        [
            "战略机构四经营体",
            0.3416922933446808,
            21024.340001000004
        ],
        [
            "微信小店经营体",
            0.4488138534393187,
            277793.55964299996
        ],
        [
            "直播七经营体",
            0.5448503736456806,
            41075.117134000015
        ],
        [
            "抖音超市经营体",
            0.8857124032679268,
            10017.36
        ],
        [
            "直播四经营体",
            0.12096406417194284,
            32809.549821
        ],
        [
            "直播三经营体",
            0.4565583060645577,
            78102.15000000001
        ],
        [
            "达人二经营体",
            0.16809361460857628,
            76516.939962
        ],
        [
            "快手直播经营体",
            0.24124220520403653,
            228687.88992100005
        ],
        [
            "短视频平台经营体",
            null,
            null
        ],
        [
            "快手达人经营体",
            0.21726923024547792,
            495608.599963
        ],
        [
            "战略机构三经营体",
            0.7254528544877223,
            40632.86000000001
        ],
        [
            "直播一经营体",
            0.8100397188142684,
            94726.68077600001
        ],
        [
            "直播六经营体",
            0.27705895345342363,
            67408.18
        ],
        [
            "快手店铺经营体",
            null,
            null
        ],
        [
            "直播二经营体",
            0.02953805372545219,
            175711.94992200003
        ],
        [
            "达人六经营体",
            0.09482798590162142,
            135448.2
        ],
        [
            "战略机构二经营体",
            0.32417774048573694,
            516436.85002599994
        ],
        [
            "达人一经营体",
            0.07542002309093919,
            175687.96
        ],
        [
            "滋补酒类品类运营经营体",
            null,
            null
        ],
        [
            "抖音坚果炒货店铺经营体",
            0.1259562383260915,
            232073.07040500003
        ],
        [
            "方便速食品类运营经营体",
            null,
            null
        ],
        [
            "饮品茶咖品类运营经营体",
            null,
            null
        ],
        [
            "抖音综合零食店铺经营体",
            0.14829442423128847,
            170736.695808
        ],
        [
            "宠物货架电商经营体",
            0.936250477787965,
            9910.269505999999
        ],
        [
            "宠物直播电商经营体",
            null,
            null
        ],
        [
            "树坚果品类运营经营体",
            null,
            null
        ],
        [
            "西式糕点品类运营经营体",
            null,
            null
        ],
        [
            "抖音烘焙饮品店铺经营体",
            0.20494356711860215,
            201963.383008
        ],
        [
            "抖音肉食果干店铺经营体",
            0.12194307085125898,
            246238.242939
        ],
        [
            "籽坚果品类运营经营体",
            null,
            null
        ],
        [
            "达人经营体自然成交-未认领",
            0.1487759568009863,
            23894.990000000005
        ],
        [
            "中式糕点品类运营经营体",
            null,
            null
        ],
        [
            "肉食海味品类运营经营体",
            null,
            null
        ],
        [
            "饼膨日化品类运营经营体",
            null,
            null
        ]
    ]

    let newProductRate = []
    let oldProductRate = []
    let sales = []
    let xData = []
    let legendData = [
        {
            name: "新品"
        },
        {
            name: "老品"
        }
    ]
    let total = 0
    dataSet.forEach(item => {
        xData.push(item[0])
        let newRate = item[1] * 100
        if (newRate == null) {
            newRate = 0
        }
        let oldRate = 100 - newRate
        newRate = newRate.toFixed(1)
        oldRate = oldRate.toFixed(1)
        newProductRate.push(newRate)
        oldProductRate.push(oldRate)
        if(item[2]) {
            total += item[2]
        }
        sales.push(item[2])
    })
    console.log(total)
    option = {
        "backgroundColor": "#fff",
        "color": [
            "#72A9FE",
            "#FFC533",
            "#56C994",
            "#F6856E",
        ],
        "title": {},
        "legend": {
            "orient": "horizontal",
            "data": legendData,
            "left": '46%',
            "top": "0%",
            "textStyle": {
                "color": "#666",
                "fontSize": 14
            }
        },
        "grid": {
            left: '0%',
            right: '0%',
            bottom: '1%',
            top: '8%',
            "containLabel": true
        },
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "shadow"
            },
            "textStyle": {
                "align": "left"
            },
            formatter(v) {
                if(v.length) {
                    let str =  v[0].name;
                    let sale = sales[v[0].dataIndex];
                    sale = (sale/10000).toFixed(1)
                    str += `<br> 销售收入: ${sale}(万元)`
                    v.forEach(item => {
                        str += `<br> ${item.marker} ${item.seriesName} ${item.value}%`
                    })
                    return str
                }
            }
        },
        "xAxis": [
            {
                "type": "category",
                "data": xData,
                "axisTick": {
                    "show": false,

                },
                "axisLine": {
                    "show": true,
                    lineStyle: {
                        color: '#333'
                    }
                },
                "axisLabel": {
                    rotate: 45,
                    "show": true,
                    "textStyle": {
                        "color": "#333",
                        "fontSize": 14
                    },
                    "formatter": "{value}"
                },

            }
        ],
        "yAxis": [
            {
                "type": "value",
                "max": "100",
                name: "%",
                "interval": 20,
                "axisTick": {
                    "show": false
                },
                "axisLine": {
                    "show": true,
                    lineStyle: {
                        color: '#333'
                    }
                },
                "axisLabel": {
                    "show": true,
                    formatter: "{value}%", //右侧Y轴文字显示
                    "textStyle": {
                        "color": "#282828",
                        "fontSize": 14
                    }
                },
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "color": "rgba(255,255,255,0.2)"
                    }
                }
            },
            {
                type: "value",
                "interval": 20,
                nameTextStyle: {
                    color: "#666666"
                },
                position: "right",
                axisLine: {
                    lineStyle: {
                        color: '#cdd5e2'
                    }
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    formatter: "{value}", //右侧Y轴文字显示
                    textStyle: {
                        color: "#666666",
                        fontSize: 14,
                    }
                },
                inverse: true // 倒转y轴显示顺序
            }
        ],
        dataZoom: [
            {
                show: false,
                realtime: true,
                "height": 12,
                start: 0,
                end: 100,
                bottom: '2%',
            },
            {
                type: 'inside',
                realtime: true,
                "height": 12,
                start: 0,
                end: 70
            },
        ],
        "series": [
            {
                "name": legendData[0].name,
                "type": "bar",
                "stack": "总量",
                "barWidth": "30%",
                "data": newProductRate,
                itemStyle: {
                    normal: {
                        label: {
                            // show: true, //开启显示
                            formatter: function (params) {
                                return params.value + '%'
                            },
                            textStyle: { //数值样式
                                color: '#333',
                                fontSize: 14
                            }
                        }
                    }
                }

            },
            {
                "name": legendData[1].name,
                "type": "bar",
                "stack": "总量",
                "barWidth": "30%",
                "data": oldProductRate,
                itemStyle: {
                    normal: {
                        label: {
                            // show: true, //开启显示
                            formatter: function (params) {
                                return params.value + '%'
                            },
                            textStyle: { //数值样式
                                color: '#333',
                                fontSize: 14
                            }
                        }
                    }
                }

            },

        ]
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
